import React from 'react';
import { history } from 'umi'
import { Row, Tooltip, Icon, Tag, Spin } from 'antd';
import { RESUME_LABEL_ENUM, RESUME_LABEL } from '@/pages/Recruitment/dictionary';
import { SelectDuty } from '@/pages/Recruitment/containers/select';
import { DotSplit } from '@/pages/Recruitment/components';

const DutyComm = ({ label, value, valueExtend }) => (
    <Row type="flex">
        <div>{label}：</div>
        <div>{value}</div>
        {valueExtend && <div style={{ marginLeft: 4 }}>{valueExtend}</div>}
    </Row>
);

/**
 * 渲染面试岗位下拉框
 */
const useRenderDuty = ({ talentDutyInfo, resumeId, query, loading = false }) => {
    const renderDuties = React.useCallback(() => {
        const { dutyNum, dutyList, hasBlackList } = talentDutyInfo || {};
        let com = (
            <DutyComm
                label="应聘岗位"
                value={<span style={{ color: 'red' }}>未匹配</span>}
                valueExtend={
                    <Tooltip title="未匹配到招聘岗位">
                        <Icon type="question-circle" />
                    </Tooltip>
                }
            />
        );
        if (dutyNum === 1) {
            const resumeLabel = dutyList?.[0]?.resumeLabel;
            const labelItem = RESUME_LABEL.find(item => item.value === resumeLabel) || {};

            const tag = RESUME_LABEL_ENUM.NONE !== resumeLabel && (
                <Tag color={labelItem.tagColor}>{labelItem.text}</Tag>
            );

            com = (
                <DutyComm
                    label="应聘岗位"
                    value={<DotSplit data={[dutyList?.[0]?.dutyName, dutyList?.[0]?.channelName]} />}
                    valueExtend={tag}
                />
            );
        } else if (dutyNum > 1) {
            com = (
                <SelectDuty
                    value={resumeId}
                    data={dutyList}
                    onChange={(_, duty) => {
                        history.push({
                            query: {
                                ...query,
                                currResumeId: duty?.resumeId,
                                activeKey: 'RESUME'
                            }
                        });
                    }}
                    style={{ width: 400 }}
                />
            );
        }
        return (
            <Spin spinning={loading}>
                <div style={{ display: 'flex', alignItems: 'center' }}>
                    {com}
                    {hasBlackList && (
                        <Tag color="black" style={{ marginLeft: 8 }}>
                            黑名单
                        </Tag>
                    )}
                </div>
            </Spin>
        );
    }, [talentDutyInfo, resumeId, loading]);
    return renderDuties;
};

export default useRenderDuty;
